<!--
 * @author  hemengxia
 预览活动详情
-->
<template>
  <div class="red-envelope-activity-preview">
    <el-dialog
      v-el-drag-dialog
      :close-on-click-modal="false"
      :visible.sync="state"
      title="预览"
      width="395px"
      center
      :before-close="handleCancel"
    >
      <div v-if="redpacketActivityType == 'REDPACT0'" class="preview-container">
        <div class="courtesy" :style="{'backgroundColor':detailInfo.backgroundColor}">
          <div class="topBgi">
            <img class="bgi" :src="view+detailInfo.backgroundImageId">
            <section class="info-content">
              <div class="time">
                <div class="timeBlock" :style="{'color':detailInfo.backgroundColor}">
                  {{ detailInfo.activityStartDatetime }} 至 {{ detailInfo.activityEndDatetime }}
                </div>
                <!-- <img src="../images/time.png" /> -->
              </div>
              <section class="type-prompt">
                {{ detailInfo.showType == 0 ? '随机获得红包' : detailInfo.showType == 1 ? '限量领取 先到先得' : '' }}
              </section>
              <section class="amount-content">
                <p v-if="detailInfo.onceAmountMini != detailInfo.onceAmountMax" class="amount-info"><span class="din-front">{{ detailInfo.onceAmountMini }}</span><span>元 — </span><span class="din-front">{{ detailInfo.onceAmountMax }}</span><span>元</span>
                </p>
                <p v-else class="amount-info">
                  <span class="din-front">{{ detailInfo.onceAmountMini }}</span><span>元</span>
                </p>
              </section>
              <section class="btn">立即领取</section>
              <section class="statistics-content">
                <section class="info">
                  <p class="din-front">{{ detailInfo.showType == 0 ? detailInfo.totalAmount : detailInfo.totalCopies }}</p>
                  <p>{{ detailInfo.showType == 0 ? '红包总金额(元)' : '红包总份数' }}</p>
                </section>
                <section class="info">
                  <p class="din-front">{{
                    detailInfo.showType == 0 ? detailInfo.ramainAmount : detailInfo.remainCopies
                  }}</p>
                  <p>{{ detailInfo.showType == 0 ? '当前剩余金额(元)' : '当前剩余份数' }}</p>
                </section>
              </section>
            </section>

          </div>
          <div class="rule">
            <div class="topPic">
              <img src="./images/rule.png">
            </div>
            <article class="text" :style="{'color':detailInfo.backgroundColor}" v-html="detailInfo.activityExplain" />
          </div>

        </div>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="handleCancel()">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { get } from './api'
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
export default {
  name: 'RedEnvelopeActivityPreview',
  directives: { elDragDialog },
  props: {
    id: {
      type: String,
      default: ''
    },
    redpacketActivityType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      state: true,
      view: '/API-DOCUMENT/document/file/download?id=',
      detailInfo: {
        backgroundColor: '#fff'
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {

    /**
     * 根编辑回显
     */
    getData() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        get({ id: this.id }).then(res => {
          loading.close()
          this.detailInfo = res.data.data
          if (this.detailInfo.activityStartDatetime) {
            this.detailInfo.activityStartDatetime = this.detailInfo.activityStartDatetime.substring(0, 10)
          }
          if (this.detailInfo.activityEndDatetime) {
            this.detailInfo.activityEndDatetime = this.detailInfo.activityEndDatetime.substring(0, 10)
          }
          if (this.detailInfo.activityExplain) {
            this.detailInfo.activityExplain = this.detailInfo.activityExplain.replace(/\n/g, '<br/>').replace(/\s/g, '&nbsp;')
          }
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },
    handleCancel() {
      this.$emit('closeSet')
    }
  }
}
</script>

<style lang="scss">

.red-envelope-activity-preview {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;

  .preview-container {
    height: 80vh;
    position: relative;

    .courtesy {
      overflow-y: auto;
      position: relative;
      height: 100%;

      &::-webkit-scrollbar {
        width: 0;
        height: 0;
        color: transparent;
      }

      .topBgi {
        height: 610px;
        position: relative;
        padding-top: 150px;

        .bgi {
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          left: 0;
          width: 100%;
        }

        .info-content {
          position: relative;

          .time {

            text-align: center;

            .timeBlock {
              width: 288px;
              height: 25px;
              margin: 0 auto;
              background: url(./images/time.png) no-repeat center;
              background-size: 100% 100%;
              padding: 3px 15px 6px 14px;
              color: #EA3F25;
              font-size: 14px;
              text-align: center;
            }

          }

          .type-prompt {
            margin-top: 46px;
            font-weight: bold;
            text-align: center;
            color: #d0770c;
            font-size: 13px;
          }

          .amount-content {
            margin-top: 45px;
            font-size: 34px;
            font-weight: bold;
            text-align: center;
            color: #ff2f28;

            span {
              &:nth-child(2n) {
                font-size: 18px;
              }
            }
          }

          .btn {
            width: 250px;
            height: 74px;
            line-height: 74px;
            margin: 55px auto 0;
            text-align: center;
            background: url("./images/btn-bg.png") no-repeat;
            background-size: 100% 100%;
            font-size: 22px;
            font-weight: bold;
            color: #ff2f28;
            font-family: PingFang SC Medium, PingFang SC Medium-Medium;
            &.disable {
              background: url("./images/disable-btn-bg.png") no-repeat;
              background-size: 100% 100%;
              color: #fff;
            }
          }

          .statistics-content {
            margin: 13px auto 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 240px;

            .info {
              width: 50%;
              text-align: center;

              p {
                &:first-child {
                  font-size: 15px;
                  font-weight: bold;
                  text-align: center;
                  color: #ffffff;
                }

                &:last-child {
                  margin-top: 8px;
                  font-size: 12px;
                  font-weight: bold;
                  text-align: center;
                  color: #ffffff;
                }
              }
            }
          }
        }

      }

      .rule {
        padding: 0 18px 27px 18px;

        .topPic {
          height: 42px;
          text-align: center;
          padding-top: 10px;

          > img {
            width: 131px;
            height: 16px;
          }
        }

        .text {
          padding: 19px 10px;
          background: #fff;
          border-radius: 8px;
          font-size: 13px;
          line-height: 1.8;
          font-weight: 400;
        }
      }

    }
  }
}
</style>
